<template>
  <div>
    <headers title="首页"></headers>
    <search></search>
    <van-tabs v-model:active="active">
      <van-tab title="标签 1">
        <swiper :images="images"></swiper>
        <van-grid>
          <van-grid-item
            v-for="(v, i) in list1"
            :key="i"
            :icon="v.image_src"
            :text="v.name"
          />
        </van-grid>
        <van-grid :border="false" :column-num="2">
          <van-grid-item v-for="(v, i) in list" :key="i">
            <van-image
              :src="
                v.goods_small_logo
                  ? v.goods_small_logo
                  : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'
              "
            />
            <div>{{ v.goods_name }}</div>
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";
import headers from "@/components/header.vue";
import search from "@/components/search.vue";
import swiper from "@/components/swiper.vue";
import { searchApi } from "@/api/api";
import { swiperdataApi } from "@/api/api";
import { catitemsApi } from "@/api/api";

const active = ref(0);
const images = ref([]);
const list = ref([]);
const list1 = ref([]);

const catFun = () => {
  catitemsApi().then((res) => {
    list1.value = res.data.message;
  });
};
catFun();

const swiperFun = () => {
  swiperdataApi().then((res) => {
    images.value = res.data.message;
  });
};
swiperFun();

const searchFun = () => {
  searchApi().then((res) => {
    list.value = res.data.message.goods;
  });
};
searchFun();
</script>

<style lang="scss" scoped></style>
